<script lang="ts" setup>
import CopyRight from "@/layouts/components/copyright.vue";
import Fastaccess from "./fastaccess.vue";
const props = defineProps({
  path: { type: String, default: "/" },
  isCopyRight: { type: Boolean, default: true },
  zoomRatio: { type: Number, default: 1 },
});
const show = computed(() => {
  return [
    "/product_ability",
    "/solution/catering",
    "/solution/retail",
    "/solution/payment",
  ].includes(props.path);
});
</script>

<template>
  <Fastaccess v-if="show && props.isCopyRight" :noZoom="true" />
  <div class="footer" >
    <div class="content">
      <div class="left">
        <div class="logo">
          <img src="/images/layouts/logo2.png" alt="" />
        </div>
        <div class="phone">客服电话：400-050-8087</div>
        <div class="ewm">
          <img src="/images/layouts/ewm.png" alt="" />
        </div>
      </div>
      <div class="right">
        <div class="list">
          <h5 class="title">
            <NuxtLink to="/product_ability"> 产品与能力 </NuxtLink>
          </h5>
          <ul>
            <li>
              <NuxtLink to="/product_ability"> 产品与能力 </NuxtLink>
            </li>
          </ul>
        </div>
        <div class="list">
          <h5 class="title">
            <NuxtLink to="/solution/catering"> 解决方案 </NuxtLink>
          </h5>
          <ul>
            <li>
              <NuxtLink to="/solution/catering"> 解决方案智慧餐饮 </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/solution/retail"> 解决方案零售 </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/solution/payment"> 解决方案支付 </NuxtLink>
            </li>
          </ul>
        </div>
        <div class="list">
          <h5 class="title">
            <NuxtLink to="/developer"> 开发者中心 </NuxtLink>
          </h5>
          <ul>
            <li>
              <NuxtLink to="/developer"> API文档 </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/developer"> 常用工具 </NuxtLink>
            </li>
          </ul>
        </div>
        <div class="list">
          <h5 class="title">
            <NuxtLink to="/help"> 帮助中心 </NuxtLink>
          </h5>
          <ul>
            <li>
              <NuxtLink to="/help"> 常规问题 </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/help"> 接入问题 </NuxtLink>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <CopyRight v-if="props.isCopyRight" />
  </div>
</template>

<style lang="scss" scoped>
.footer {
  background: #f1f1f1;
  padding-top: 70px;
  box-sizing: border-box;
  .ewm {
    width: 113px;
    height: 115px;
    margin-top: 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .phone {
    margin-top: 14px;
  }

  .logo {
    width: 167px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    float: left;
    height: 100%;
    margin-left: 125px;

    .title {
      font-weight: 400;
      font-size: 16px;
      color: #242424;
      a {
        font-weight: 400;
        font-size: 16px;
        color: #242424;
      }
    }
    ul {
      margin-top: 46px;
    }
    li {
      font-weight: 350;
      font-size: 14px;
      color: #767676;
      margin-bottom: 15px;
      a {
        font-size: 14px;
        color: #767676;
        font-weight: 350;
        transition: color .3s ease;
        &:hover {
          color: #e12010;
        }
      }
    }

    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
</style>
